extends ../../components/layout
append style
  +css(['demo/demo.css','lib/swiper.min.css'],true)
  style.
    .gallery-thumbs .swiper-slide {
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
    }
    .swiper-slide img {
      width: 100%;
    }
block title
  title navbar
block content
  ul.gzl-navbar
    li.gzl-navbar__item.active 标题1
    li.gzl-navbar__item 标题2
    li.gzl-navbar__item 标题3
    li.gzl-navbar__item 标题4
  ul.gzl-navbar.gzl-navbar_auto
    li.gzl-navbar__item.active 标题1
    li.gzl-navbar__item 标题2
    li.gzl-navbar__item 标题3
    li.gzl-navbar__item 标题4
    li.gzl-navbar__item 标题5
    li.gzl-navbar__item 标题6
    li.gzl-navbar__item 标题7
    li.gzl-navbar__item 标题8
    li.gzl-navbar__item 标题9
    li.gzl-navbar__item 标题0
  .swiper-container.gallery-thumbs
    .swiper-wrapper.gzl-navbar
      .gzl-navbar__item.swiper-slide 标题1
      .gzl-navbar__item.swiper-slide 标题2
      .gzl-navbar__item.swiper-slide 标题3
      .gzl-navbar__item.swiper-slide 标题4
      .gzl-navbar__item.swiper-slide 标题5
  .swiper-container.gallery-top
    .swiper-wrapper
      .swiper-slide
        img(src="https://www.swiper.com.cn/demo/img/nature1.jpg")
      .swiper-slide
        img(src="https://www.swiper.com.cn/demo/img/nature2.jpg")
      .swiper-slide
        img(src="https://www.swiper.com.cn/demo/img/nature3.jpg")
      .swiper-slide
        img(src="https://www.swiper.com.cn/demo/img/nature4.jpg")
      .swiper-slide
        img(src="https://www.swiper.com.cn/demo/img/nature5.jpg")
    .swiper-button-next.swiper-button-white
    .swiper-button-prev.swiper-button-white

append script
  script.
    require(['swiper'], function (Swiper) {
      var galleryThumbs = new Swiper('.gallery-thumbs', {
        autoHeight: true,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true
      });
      var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        thumbs: {
          swiper: galleryThumbs
        }
      });
    })